<template>
	<view>
		<z-paging ref="pagePaging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower">
			<template #top>
				<view class="status_bar"></view>
			</template>

			<view class="banner">
				<view class='item'>
					<image class="bg" :src="getImageUrl('home_banner_1.png')" mode="widthFix"></image>
					<view class="content">
						<view class="title">缘分配对</view>
						<view class="sub">免费视频</view>
					</view>
					<image class="right" :src="getImageUrl('home_right_1.png')" mode="widthFix"></image>
				</view>
				<view class='item'>
					<image class="bg" :src="getImageUrl('home_banner_2.png')" mode="widthFix"></image>
					<view class="content">
						<view class="title">视频交友</view>
						<view class="sub">快速脱单</view>
					</view>
					<image class="right" :src="getImageUrl('home_right_2.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="banner">
				<view class='item'>
					<image class="bg" :src="getImageUrl('home_banner_3.png')" mode="widthFix"></image>
					<view class="content">
						<view class="title">邀请有奖</view>
						<view class="sub">领取超多奖励</view>
					</view>
					<image class="right" :src="getImageUrl('home_right_3.png')" mode="widthFix"></image>
				</view>
				<view class='item'>
					<image class="bg" :src="getImageUrl('home_banner_4.png')" mode="widthFix"></image>
					<view class="content">
						<view class="title">心动纸条</view>
						<view class="sub">放纸条抽对象</view>
					</view>
					<image class="right" :src="getImageUrl('home_right_4.png')" mode="widthFix"></image>
				</view>
			</view>

			<view>
				<view
					style="display: flex; flex-direction: row; background-color: #fff; z-index: 100;position: sticky;top :0;">
					<z-tabs tab-width="80" ref="tabs" :list="tabList" :current="current" @change="tabChange"
						active-color="#222" :active-style="{'font-size':'40rpx', 'font-weight': '700'}"
						:tabs-style="{'width':'300rpx'}" bar-width='20' />
				</view>
				<swiper class="swiper" :style="[{height:swiperHeight+'px'}]" :current="current"
					@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
						<home-item ref="swiperList" :tabIndex="index" :currentIndex="current"
							@heightChanged="heightChanged"></home-item>
					</swiper-item>
				</swiper>
			</view>
		</z-paging>

		<uni-popup type="bottom" ref="pay" :is-mask-click="false">
			<pay payType="3"></pay>
		</uni-popup>
	</view>

</template>

<script>
	import constant from '@/common/constant.js';
	import TicketUtil from '@/main/common/TicketUtil.js';
	import CacheUtil from '@/main/common/CacheUtil';
	export default {
		data() {
			return {
				swiperHeight: 0,
				tabList: ['人气', '活跃'],
				current: 0,
			};
		},
		onLoad() {
			this.requestUser();
			this.requestLatlng();
		},
		onShow() {
			setTimeout(() => {
				this.showDialogTicket(); //为啥要延迟，防止读写配置文件慢于
			}, 500)
		},
		methods: {
			//tabs通知swiper切换
			tabChange(index) {
				this._setCurrent(index);
			},
			//下拉刷新时，通知当前显示的列表进行reload操作
			onRefresh() {
				this.$refs.swiperList[this.current].reload(() => {
					//当当前显示的列表刷新结束，结束当前页面的刷新状态
					this.$refs.pagePaging.endRefresh();
				});
			},
			//当滚动到底部时，通知当前显示的列表加载更多
			scrolltolower() {
				this.$refs.swiperList[this.current].doLoadMore();
			},
			//swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this._setCurrent(e.detail.current);
				this.$refs.tabs.unlockDx();
			},
			//设置swiper的高度
			heightChanged(height) {
				if (height === 0) {
					//默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
					//注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
					height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
				}
				this.swiperHeight = height;
			},
			_setCurrent(current) {
				if (current !== this.current) {
					//切换tab时，将上一个tab的数据清空
					this.$refs.swiperList[this.current].clear();
				}
				this.current = current;
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			showDialogTicket() {
				TicketUtil.isOpen().then(res=>{
					if(res){
						uni.hideTabBar()
						this.$refs.pay.open()
					}else{
						uni.showTabBar()
						this.$refs.pay.close()
					}
				})
			},
			requestUser() {
				if(CacheUtil.getLogin()){
					uni.$http.getUser();
				}
			},
			requestLatlng() {
				if (!uni.$constant.online && CacheUtil.getUserId()) {
					uni.getLocation({
						success: res => {
							let params = {
								lat: lat,
								lon: lon
							}
							uni.$http.updateUser(params)
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.banner {
		display: flex;
		flex-direction: row;
		padding: 0 30rpx;
		margin: 5rpx;

		.item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			position: relative;
			width: 350rpx;
			height: 100rpx;
			box-sizing: border-box;
			margin: 5rpx;
			padding: 0 20rpx;

			.bg {
				position: absolute;
				top: 0;
				right: 0;
				z-index: -1;
				width: 100%;
				height: 100%;
			}

			.content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 100%;
				height: 100%;
				box-sizing: border-box;

				.title {
					font-size: 28rpx;
					color: #fff;
					font-weight: 700;
				}

				.sub {
					font-size: 24rpx;
					color: #fff;
				}
			}

			.right {
				width: 100rpx;
			}
		}
	}

	.swiper {
		height: 100%;
	}

	.popup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: white;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		width: 100wh;
		height: 550rpx;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			color: #222;
			line-height: 60rpx;
			height: 60rpx;
			text-align: center;
		}

		.tip {
			font-size: 20rpx;
			color: #888;
		}

		.price {
			font-size: 50rpx;
			color: mediumvioletred;
			text-align: center;
		}

		.type {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
			color: #222;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.tip {
				font-size: 28rpx;
				color: #555;
				flex: 1;
				text-align: left;
			}

		}
	}
</style>